<template>
	<view class="page-body" :class="[app.setCStyle()]">
		<!--  -->
		
		<view class="p20">
			<u-form :model="model" ref="uForm" :errorType="errorType">
				<view class="form_box bg-white">
					<view class="title">转赠金额</view>
					<u-form-item prop="money" label-width="50" label="￥" :label-style="{'padding-top':'10rpx'}" class="money_input">
						<u-input v-model="model.money" @blur="changeMoney" @confirm="changeMoney" :custom-style="{'font-size':'50rpx'}" placeholder-style="font-size:30rpx;" type="number" placeholder="请输入需要转赠的金额" />
					</u-form-item>
					<view class="balance_money fs32">
						帐户余额：<text>{{account.balance_money}}</text>
						<view class="all_btn" @click="changeMoney(true);">全部转赠</view>
					</view>
					
					<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" class=""  label-width="130" label="收款用户" prop="to_user">
						<u-input @blur="getToUserInfo"  placeholder="收款用户ID" v-model="toUserInfo.user_id" type="text"></u-input>
					</u-form-item>
					<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" class="" label-width="130" label="备注" prop="remarks">
						<u-input   placeholder="请填写转赠备注" v-model="model.remarks" type="text"></u-input>
					</u-form-item>
					
					<view class="fs32" v-if="toUserInfo != ''">
						<view class="mt30"><text>收款人：</text>{{toUserInfo.nick_name}} ID：{{toUserInfo.user_id}}</view>
						<view class="mt30"><text>收款人手机：</text>{{toUserInfo.mobile}}</view>
						<text class="block fs32 mt30 red">* 请核实收款人信息，提交后将不可改变</text>
					</view>
					
				</view>
				<button size="default" shape="circle" type="primary" :loading="isLoading" class="mt40 primarybtn fs32" @click="post" >立即转赠</button>
			</u-form>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				labelPosition: 'left',
				border: false,
				isLoading:false,
				model: {
					money: '',
					maxMoney:0,
					remarks:'',
					to_user:''
				},
				account:{},
				errorType: ['toast'],
				toUserInfo:[]	
			}
		},
		onLoad() {
		},
		onShow() {
			this.$u.post('member/api.wallet/getWalletInfo').then(res => {
				this.account = res.data.account;
			});
		},
		onReady() {},
		methods: {
			
			changeMoney(maxMoney){//提现金额变化
				this.model.maxMoney = 0;
				if (maxMoney === true){
					this.model.money = this.account.balance_money;
					this.model.maxMoney = 1;
				}else if (this.model.money <= 0){
					return false;
				}
				
			},
			getToUserInfo:function(e){
				if (e <= 0) {
					this.toUserInfo = [];
					this.model.to_user = 0;
					return false;
				};
				this.$u.post('member/api.Transfer/getToUserInfo',{user_id:e}).then(res => {
					if (res.code == 1) {
						this.toUserInfo = res.data.toUserInfo
						this.model.to_user = this.toUserInfo.user_id;
					}
				});
			},
			changeRemarks(){
				this.model.remarks = '';
			},
			post(){
				let _this = this
				if(_this.model.money < 1){
					_this.app.showToast('转赠金额不能小于1');
					return false;
				}
				if(_this.model.to_user == ''){
					_this.app.showToast('请输入收款用户.');
					return false;
				}
				if(_this.model.remarks == ''){
					_this.app.showToast('请输入转赠备注.');
					return false;
				}
				uni.showModal({
					title: '提示',
					content: '确认转赠？',
					showCancel: true,
					confirmText: '确认',
					cancelText: '取消',
					success: function(res) {
						if (res.confirm) {
							_this.isLoading = true;
							_this.$u.post('member/api.Transfer/post',_this.model).then(res => {
								_this.isLoading = false;
								_this.app.showModal(res.msg,-1);
							}).catch(res=>{
								_this.isLoading = false;
							});
						}
					}
				});
				
			}
		}
	}
</script>
<style  lang="scss">
	.top_title {
		position: relative;
		background-color: #FFFFFF;
		padding: 0rpx 20rpx;
		display: flex;
		align-items: center;
		height: 100rpx;
		width: 100%;
		.payment_info{
			display: flex;
			align-items: center;
			.u-image {
				display: inline-block;
				margin-right: 10rpx;
			}
			text {
				color: $font-color-light;
			}
		}
		.sel_account {
			position: absolute;
			right: 20rpx;
			color: #ff5428;
		}
	}
	
	.form_box {
		padding: 80rpx 40rpx;
		.title {
			font-size: 35rpx;
		}
		.money_input {
			border-radius: 10rpx;
			display: flex;
			background-color: $border-color-light;
			margin-top: 40rpx;
			padding: 20rpx;
			font-size: 38rpx;
		}
		.balance_money{
			color: #ff5428;
			margin-top: 20rpx;
			text{
				color: #ff5428;
			}
			.all_btn{
				color: #ff5428;
				float: right;
			}
		}
		.withdraw_fee{
			color: #ff5428;
			margin-top: 20rpx;
			text{
				color: $font-color-red;
			}
		}
		.withdraw_tip{
			color: $font-color-red;
			margin-top: 20rpx;
		}
	}
	.mask-box{
		top:200rpx;
	}
	.payment_list_box{
		padding: 0rpx 20rpx;
		position: absolute;
		top: 100rpx;
		background-color: #FFFFFF;
		border-top: 1rpx solid $border-color-light;
		width: 100%;
		z-index: 99;
		.payment_error{
			text-align: center;
			padding: 50rpx 0rpx;
		}
		.radio_box{
			display: block;
			padding: 40rpx 30rpx;
			border-bottom: 1rpx solid $border-color-light;
			.info{
				align-items: center;
				display: flex;
				.u-image {
					display: inline-block;
					margin-right: 10rpx;
				}
			}
			.radio{
				float: right;
			}
		}
		.payment_manage{
			margin-top: 30rpx;
			color: #ff5428;
			.u-icon{
				border: 1rpx solid #ff5428;
				border-radius: 50%;
				font-size: 20rpx;
				padding: 2rpx;
				margin-right: 5rpx;
				line-height: 50rpx;
			}
		}
	}
	.ssdsfs{
		background-color: #ff5428 !important;
	}
</style>